<template>
  <div>
    <a-select
      v-model:value="value"
      style="width: 120px"
      @focus="focus"
      ref="select"
      @change="handleChange"
    >
      <a-select-option
        v-for="item in selectOptions"
        :key="item.value"
        :value="item.value"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  name: "MonthDropDownSelector",
  emits: ['change'],
  data() {
    return {
      value: 0,
      selectOptions: [
        { value: 0, label: "1月" },
        { value: 1, label: "2月" },
        { value: 2, label: "3月" },
        { value: 3, label: "4月" },
        { value: 4, label: "5月" },
        { value: 5, label: "6月" },
        { value: 6, label: "7月" },
        { value: 7, label: "8月" },
        { value: 8, label: "9月" },
        { value: 9, label: "10月" },
        { value: 10, label: "11月" },
        { value: 11, label: "12月" },
        // { value: "January", label: "1月" },
        // { value: "February", label: "2月" },
        // { value: "March", label: "3月" },
        // { value: "April", label: "4月" },
        // { value: "May", label: "5月" },
        // { value: "June", label: "6月" },
        // { value: "July", label: "7月" },
        // { value: "August", label: "8月" },
        // { value: "September", label: "9月" },
        // { value: "October", label: "10月" },
        // { value: "November", label: "11月" },
        // { value: "December", label: "12月" },
      ],
    };
  },
  methods: {
    focus() {
      // console.log("focus");
    },
    handleChange(value) {
      // console.log(`selected ${value}`);
      this.$emit('change', value)
    },
  },
};
</script>
